<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-02-07 14:01:44
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-02-16 14:54:35
 * @FilePath: \vite-project\src\component\Common\Card.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <van-popup v-model:show="props.modelShow" round style="width:70%;">
        <div class="result-model-box">
            <div class="title-bg-box">
                <div class="circle-flex-box">
                    <van-icon name="success" size="40" color="#144CBB" />
                </div>
            </div>
            <div class="tips">
                <div class="result-font-box">扣分成功</div>
                <van-button round type="default" size="small" style="font-size:16px;" plain
                    color="#666666">查看扣分记录</van-button>
                <div class="time-font-box color9">
                    <span style="color:#3D7FFF;"> 3 </span>秒后 自动关闭弹窗~
                </div>
            </div>
        </div>
    </van-popup>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
interface PropsType {
    modelShow?: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
    modelShow: false,
})
interface EmitType {
}
const emit = defineEmits<EmitType>()
</script>
<style lang="scss" scoped>
.result-model-box {
    text-align: center;

    .title-bg-box {
        height: 120px;
        background-image: url('../../assets/images/resultModel2.png');
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .circle-flex-box {
            width: 60px;
            height: 60px;
            background: #E3E9FA;
            box-shadow: 0px 10px 20px #144CBB;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
        }
    }
    .tips{
        padding: 10px;
    }
    .result-font-box {
        font-size: 20px;
        margin: 0px 0 15px 0;
    }

    .time-font-box {
        font-size: 14px;
        margin-top: 15px;
    }
}
</style>
